<template>
    <div class="userdetails">

        <div class="slide">
          <div class="usermess">
            <div class="user">
                <!-- <img src="../../../../static/imgs/photo.jpeg" alt=""> -->
                <img :src="this.list.user.photo" alt="">
                <span>
                    <p><a href="###">{{this.list.user.name}}</a></p>
                    <p>入驻时间：{{time}}</p>
                </span>
            </div>

            <div class="mess">
              <span>
                <p>{{this.list.user.blogs}}</p>
                <p class="name">博客</p>
              </span>
              <span>
                <p>{{this.list.user.fans}}</p>
                <p class="name">粉丝</p>
              </span>
              <span>
                <p>{{this.list.user.likes}}</p>
                <p class="name">获赞</p>
              </span>
              <span>
                <p>{{this.list.user.comments}}</p>
                <p class="name">评论</p>
              </span>
              <span>
                <p>{{this.list.user.access}}</p>
                <p class="name">访问</p>
              </span>
             
            </div>

            <div class="button" v-show="self">
                <span @click="foucs()" v-show="fou">
                    <a href="###">关注</a>
                </span>
                <span @click="foucs()" class="fou" v-show="delfou">
                    <a href="###">已关注</a>
                </span>
                <router-link :to='"/sendmess/" + this.list.user.id'>
                <span>
                    <a href="###" @click="islogin()">私信</a>
                </span>
                </router-link>
            </div>

            <div class="button" v-show="!self">
              <router-link to="/usercenter">
                <span style="margin-left: 38%;"><a href="###">我的</a></span>
              </router-link>
            </div>

          </div>

          <div class="sortmain">
            <ul>
              <li class="sorttitle">分类专栏</li>
              <li v-for="(item,index) in blogs" :key="item.index" :class="{active:index==isShow}" @click="click(index)">
                <a href="###" ref="kind">{{item[0].blog.clazz}}</a><span>{{item.length}}篇</span>
              </li>
             
            </ul>

            <div class="banner" style="width:100%;position:absolute;bottom:0rem;"></div>
          </div>

        </div>

        <div class="main">
          <div class="sort">
            <div>
              <a href="###"><span @click="blog()">博客</span>
              <i style="color:#26a2ff" v-show="all">{{this.allblog.length}}</i>
              <i style="color:#26a2ff" v-show="some">{{this.someblog.length}}</i>
              </a>
              <a href="###"><span @click="video()">视频</span><i style="color:#26a2ff">{{this.Length}}</i></a>
              <a href="###"><span @click="book()">书籍</span><i style="color:#26a2ff">{{this.length}}</i></a>
            </div>

            <div>
              <div v-show="show1" class="block1"></div>
              <div v-show="show2" class="block2"></div>
              <div v-show="show3" class="block3"></div>
            </div>
          </div>

          <div v-show="show1" class="single">
            <ul>

              <li class="show1" v-for="(item,index) in allblog" :key="item.index" v-show="all">
                <span class="content">

                  <router-link :to='"/blogdetails/" + item.blog.id'>
                  <p>
                    <a href="###" class="a">{{item.blog.title}}</a>
                  </p>
                  
                  <div class="ql-snow ql-editor" v-html="item.blog.content">{{item.blog.content}}</div>
                  </router-link>

                  <p class="icon">
                    <span class="iconfont"><i>{{item.blog.createtime.slice(0,10)}}</i></span>
                    <span class="iconfont"><a href="###" title="浏览">&#xe67f;</a> <i>{{item.blog.browse}}</i></span>
                    <router-link :to='"/blogdetails/" + item.blog.id'>
                    <span class="iconfont"><a href="###" title="评论">&#xe6a4;</a> <i>{{item.blog.comments}}</i></span>
                    </router-link>

                    <span class="iconfont" v-if="!statue[index]"><a href="###" title="点赞"
                    @click="good(index)">&#xe6d4;</a> <i>{{item.blog.likes}}</i></span>

                    <span class="iconfont" v-if="statue[index]"><a href="###" title="取消点赞"
                    @click="good(index)" style="color:skyblue">&#xe6d5;</a> <i>{{item.blog.likes}}</i></span>

                    <span class="iconfont" v-if="!favorite[index]"><a href="###" title="收藏" @click="collect(index)">&#xe690;</a> <i>{{item.blog.favorite}}</i></span>

                    <span class="iconfont" v-if="favorite[index]"><a href="###" title="取消收藏" @click="collect(index)" style="color:skyblue">&#xe6ca;</a> <i>{{item.blog.favorite}}</i></span>
                    
                  </p>

                </span>
              </li>

              <li class="show1" v-show="some" v-for="(item,index) in someblog" :key="item.index">
                <span class="content">

                  <router-link :to='"/blogdetails/" + item.blog.id'>
                  <p>
                    <a href="###" class="a">{{item.blog.title}}</a>
                    
                  </p>
                  
                  <div class="ql-snow ql-editor" v-html="item.blog.content">{{item.blog.content}}</div>
                  </router-link>

                  <p class="icon">
                    <span class="iconfont"><i>{{item.blog.createtime.slice(0,10)}}</i></span>
                    <span class="iconfont"><a href="###" title="浏览"
                    @click="good()" ref="good">&#xe67f;</a> <i>{{item.blog.browse}}</i></span>
                    <span class="iconfont"><a href="###" title="评论">&#xe6a4;</a> <i>{{item.blog.comments}}</i></span>

                    <span class="iconfont" v-if="!statue[index]"><a href="###" title="点赞"
                    @click="good(index)">&#xe6d4;</a> <i>{{item.blog.likes}}</i></span>

                    <span class="iconfont" v-if="statue[index]"><a href="###" title="取消点赞"
                    @click="good(index)" style="color:skyblue">&#xe6d5;</a> <i>{{item.blog.likes}}</i></span>

                    <span class="iconfont" v-if="!favorite[index]"><a href="###" title="收藏" @click="collect(index)">&#xe690;</a> <i>{{item.blog.favorite}}</i></span>

                    <span class="iconfont" v-if="favorite[index]"><a href="###" title="取消收藏" @click="collect(index)" style="color:skyblue">&#xe6ca;</a> <i>{{item.blog.favorite}}</i></span>
                    
                  </p>

                </span>
              </li>

            </ul>
            
            <p class="empty" v-show="blo">暂无博客</p>

          </div>

          <div v-show="show2" class="single">

            <ul>
              <li class="show3" v-for="(item
              ,index) in listv" :key="item.index">
              <div class="photo">
                
                <img :src="item.resource.photo" alt="">
              </div>
              <div class="message">
                <p>名字: {{item.resource.name}}</p>
                <p>路径：{{item.resource.path}}<a href="###"></a></p>
                
                <p>简介：{{item.resource.introduction}}</p>
                
              </div>
              <p class="icon">
                
                <span class="iconfont"><a href="###" title="浏览">&#xe67f;</a> <i>{{item.resource.browse}}</i></span>
                <span class="iconfont"><a href="###" title="评论" @click="showvcom(index)">&#xe6a4;</a> <i>{{item.resource.comments}}</i></span>

                <span class="iconfont" v-if="!statuev[index]"><a href="###" title="点赞"
                @click="goodv(index)">&#xe6d4;</a> <i>{{item.resource.likes}}</i></span>

                <span class="iconfont" v-if="statuev[index]"><a href="###" title="取消点赞"
                @click="goodv(index)" style="color:skyblue">&#xe6d5;</a> <i>{{item.resource.likes}}</i></span>

                <span class="iconfont" v-if="!favoritev[index]"><a href="###" title="收藏" @click="collectv(index)">&#xe690;</a> <i>{{item.resource.favorite}}</i></span>

                <span class="iconfont" v-if="favoritev[index]"><a href="###" title="取消收藏" @click="collectv(index)" style="color:skyblue">&#xe6ca;</a> <i>{{item.resource.favorite}}</i></span>
                
              </p>

              <div class="comment" v-show="showv[index]">
                <ul>
                  <li v-show="!listv[index].resource.comments"><p>暂无评论</p></li>
                  <li v-for="item in listp" :key="item.index">
                    <p v-if="item.comment"><img :src="item.user.photo" alt="">{{item.user.name}}：{{item.comment.message}} <i>{{item.comment.createtime.slice(0,10)}}</i></p>
                  </li>
                  <li>
                    <input type="text" placeholder="发表评论" v-model="sendmessv">
                    <span @click="sendv(index)"><a href="###">发送</a></span>
                  </li>
                </ul>
              </div>

            </li>
            <p class="page">
              <span><a href="###" class="iconfont" title="上一页" @click="Last()">&#xe634;</a></span>
              <span><i>{{this.Page}}</i></span>
              <span><a href="###" class="iconfont" title="下一页" @click="Next()">&#xe666;</a></span>
            </p>

            </ul>
          </div>

          <div v-show="show3" class="single">
            <ul>
              <li class="show3" v-for="(item,index) in listb" :key="item.index">
              <div class="photo">
                <img :src="item.resource.photo" alt="">
              </div>
              <div class="message">
                <p>书名: {{item.resource.name}}</p>
                <p>路径：{{item.resource.path}}<a href="###"></a></p>
                
                <p>简介：{{item.resource.introduction}}</p>
                
              </div>
              <p class="icon">
                
                <span class="iconfont"><a href="###" title="浏览">&#xe67f;</a> <i>{{item.resource.browse}}</i></span>
                <span class="iconfont"><a href="###" title="评论" @click="showbcom(index)">&#xe6a4;</a> <i>{{item.resource.comments}}</i></span>

                <span class="iconfont" v-if="!statueb[index]"><a href="###" title="点赞"
                @click="goodb(index)">&#xe6d4;</a> <i>{{item.resource.likes}}</i></span>

                <span class="iconfont" v-if="statueb[index]"><a href="###" title="取消点赞"
                @click="goodb(index)" style="color:skyblue">&#xe6d5;</a> <i>{{item.resource.likes}}</i></span>

                <span class="iconfont" v-if="!favoriteb[index]"><a href="###" title="收藏" @click="collectb(index)">&#xe690;</a> <i>{{item.resource.favorite}}</i></span>

                <span class="iconfont" v-if="favoriteb[index]"><a href="###" title="取消收藏" @click="collectb(index)" style="color:skyblue">&#xe6ca;</a> <i>{{item.resource.favorite}}</i></span>
                
              </p>

              <div class="comment" v-show="showb[index]">
                <ul>
                  <li v-show="!listb[index].resource.comments"><p>暂无评论</p></li>
                  <li v-for="item in listcom" :key="item.index">
                    <p v-if="item.comment"><img :src="item.user.photo" alt="">{{item.user.name}}：{{item.comment.message}} <i>{{item.comment.createtime.slice(0,10)}}</i></p>
                  </li>
                  <li>
                    <input type="text" placeholder="发表评论" v-model="sendmessb">
                    <span @click="sendb(index)"><a href="###">发送</a></span>
                  </li>
                </ul>
              </div>

            </li>

            <p class="page">
              <span><a href="###" class="iconfont" title="上一页" @click="last()">&#xe634;</a></span>
              <span><i>{{this.page}}</i></span>
              <span><a href="###" class="iconfont" title="下一页" @click="next()">&#xe666;</a></span>
            </p>

            </ul>
          </div>

      </div>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
import {EventBus} from '../../../../static/js/eventBus'
export default {
    name: 'userdetails',

    data() {
      return {
        show1: true,
        show2: false,
        show3: false,
        fou: '',
        delfou: '',
        blo: false,
        all: true,
        some: false,
        self: true,
        time: '',
        user: [],
        // createtime: '',
        list: [],
        user: [],
        blogs: [],
        allblog: [],
        someblog: [],
        kind: [],
        isShow: 0,
        statue: [],
        favorite: [],

        listv: [],
        statuev: [],
        favoritev: [],
        showv: [],
        listp: [],
        sendmessv: '',

        listb: [],
        statueb: [],
        favoriteb: [],
        showb: [],
        listcom: [],
        sendmessb: '',

        Page: 1,
        page: 1,
        Length: '',
        length: '',
      }
    },

    methods: {
      islogin () {
        if (this.user == "") {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },
      blog() {
        this.show1 = true

        this.show2 = false
        this.show3 = false
      },

      video() {
        this.show2 = true

        this.show1 = false
        this.show3 = false
      },

      book() {
        this.show3 = true

        this.show1 = false
        this.show2 = false
      },

      foucs () {
        if (this.user != "") {
          if (this.list.attention == 1) {
         
            this.fou = true
            this.delfou = false
            this.list.attention = 0

            let postData = qs.stringify({
              id: this.$route.params.id,
              statue: 1,
            })

            axios.post(`/api/user/attention`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
              }

            })
          } else {
          
            this.fou = false
            this.delfou = true
            this.list.attention = 1

            let postData = qs.stringify({
              id: this.$route.params.id,
              statue: 0,
            })

            axios.post(`/api/user/attention`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
              }

            })
          }
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      click (index) {
        this.isShow = index
        
        for (var i in this.blogs) {
          this.someblog = this.blogs[index]
        }
        console.log(this.someblog)
        
        this.all = false
        this.some = true
      },

      good (index) {
        if (this.user != "") {
          if(this.statue[index] == 1) {
            this.statue[index] = !this.statue[index]
            let newItem = this.statue[index]
            Vue.set(this.statue, index, newItem)

            let postData = qs.stringify({
              bid: this.allblog[index].blog.id,
              statue: 1
            })

            axios.post(`/api/likeB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  console.log(response.data)
                  this.allblog[index].blog.likes -- 
                } 

            })
          } else {
            this.statue[index] = !this.statue[index]
            let newItem = this.statue[index]
            Vue.set(this.statue, index, newItem)

            let postData = qs.stringify({
              bid: this.allblog[index].blog.id,
              statue: 0
            })

            axios.post(`/api/likeB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  console.log(response.data)
                  this.allblog[index].blog.likes ++
                } 

            })

          }
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
          }
      },

      collect (index) {
        if (this.user != "") {
          if(this.favorite[index] == 1) {
            this.favorite[index] = !this.favorite[index]
            let newItem = this.favorite[index]
            Vue.set(this.favorite, index, newItem)

            let postData = qs.stringify({
              bid: this.allblog[index].blog.id,
              favorite: 1
            })

            axios.post(`/api/favoriteB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.allblog[index].blog.favorite -- 
              } 

            })
          } else {
            this.favorite[index] = !this.favorite[index]
            let newItem = this.favorite[index]
            Vue.set(this.favorite, index, newItem)

            let postData = qs.stringify({
              bid: this.allblog[index].blog.id,
              favorite: 0
            })

            axios.post(`/api/favoriteB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.allblog[index].blog.favorite ++
              } 

            })

          }
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      goodv (index) {
        if (this.user != "") {
          if(this.statuev[index] == 1) {
            this.statuev[index] = !this.statuev[index]
            let newItem = this.statuev[index]
            Vue.set(this.statuev, index, newItem)

            let postData = qs.stringify({
              rid: this.listv[index].resource.id,
              statue: 1
            })

            axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  console.log(response.data)
                  this.listv[index].resource.likes -- 
                } 

            })
          } else {
            this.statuev[index] = !this.statuev[index]
            let newItem = this.statuev[index]
            Vue.set(this.statuev, index, newItem)

            let postData = qs.stringify({
              rid: this.listv[index].resource.id,
              statue: 0
            })

            axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  console.log(response.data)
                  this.listv[index].resource.likes ++
                } 

            })

          }
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      collectv (index) {
        if (this.user != "") {
          if(this.favoritev[index] == 1) {
            this.favoritev[index] = !this.favoritev[index]
            let newItem = this.favoritev[index]
            Vue.set(this.favoritev, index, newItem)

            let postData = qs.stringify({
              rid: this.listv[index].resource.id,
              favorite: 1
            })

            axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.listv[index].resource.favorite -- 
              } 

            })
          } else {
            this.favoritev[index] = !this.favoritev[index]
            let newItem = this.favoritev[index]
            Vue.set(this.favoritev, index, newItem)

            let postData = qs.stringify({
              rid: this.listv[index].resource.id,
              favorite: 0
            })

            axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.listv[index].resource.favorite ++
              } 

            })

          }
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      showvcom (index) {
        if (this.showv[index] == false) {
          for (var i = 0; i < this.listv.length; i++) {
            this.showv[i] = false
            this.showv[index] = true
            let newItem = this.showv[index]
            Vue.set(this.showv, index, newItem)
          }
          console.log(this.showv)

        } else {
          for (var i = 0; i < this.listv.length; i++) {
            this.showv[i] = false
            this.showv[index] = false
            let newItem = this.showv[index]
            Vue.set(this.showv, index, newItem)
          }

        }

        let postData = qs.stringify({
          page: 1,
        })

        // for (var i = 0; i < this.List.length; i++) {
          let id = this.listv[index].resource.id
        // }

        axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listp = response.data
            console.log(this.listp)
          } 
        })
        
      },

      sendv (index) {
        if (this.user != "") {
          let postData = qs.stringify({
            message: this.sendmessv,
          })

          let id = this.listv[index].resource.id

          axios.post(`/api/resource/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              // this.listp = response.data
              console.log(response.data)
              let postData = qs.stringify({
                page: 1,
              })

              // for (var i = 0; i < this.List.length; i++) {
                let id = this.listv[index].resource.id
              // }

              axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  this.listp = response.data
                  this.sendmessv = ""
                  this.listv[index].resource.comments ++
                  console.log(this.listp)
                } 
              })
            } 
          })
          this.$message({
            type: 'success',
            message: "发表成功！"
          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      goodb (index) {
        if (this.user != "") {
          if(this.statueb[index] == 1) {
            this.statueb[index] = !this.statueb[index]
            let newItem = this.statueb[index]
            Vue.set(this.statueb, index, newItem)

            let postData = qs.stringify({
              rid: this.listb[index].resource.id,
              statue: 1
            })

            axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  console.log(response.data)
                  this.listb[index].resource.likes -- 
                } 

            })
          } else {
            this.statueb[index] = !this.statueb[index]
            let newItem = this.statueb[index]
            Vue.set(this.statueb, index, newItem)

            let postData = qs.stringify({
              rid: this.listb[index].resource.id,
              statue: 0
            })

            axios.post(`/api/likeR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  console.log(response.data)
                  this.listb[index].resource.likes ++
                } 

            })

          }
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      collectb (index) {
        if (this.user != "") {
          if(this.favoriteb[index] == 1) {
            this.favoriteb[index] = !this.favoriteb[index]
            let newItem = this.favoriteb[index]
            Vue.set(this.favoriteb, index, newItem)

            let postData = qs.stringify({
              rid: this.listb[index].resource.id,
              favorite: 1
            })

            axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.listb[index].resource.favorite -- 
              } 

            })
          } else {
            this.favoriteb[index] = !this.favoriteb[index]
            let newItem = this.favoriteb[index]
            Vue.set(this.favoriteb, index, newItem)

            let postData = qs.stringify({
              rid: this.listb[index].resource.id,
              favorite: 0
            })

            axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.listb[index].resource.favorite ++
              } 

            })

          }
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      showbcom (index) {
        if (this.showb[index] == false) {
          for (var i = 0; i < this.listb.length; i++) {
            this.showb[i] = false
            this.showb[index] = true
            let newItem = this.showb[index]
            Vue.set(this.showb, index, newItem)
          }
          console.log(this.showb)
          console.log(this.showv)
        } else {
          for (var i = 0; i < this.listb.length; i++) {
            this.showb[i] = false
            this.showb[index] = false
            let newItem = this.showb[index]
            Vue.set(this.showb, index, newItem)
          }

        }

        let postData = qs.stringify({
          page: 1,
        })

        // for (var i = 0; i < this.List.length; i++) {
          let id = this.listb[index].resource.id
        // }

        axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listcom = response.data
            console.log(this.listb)
          } 
        })
        
      },

      sendb (index) {
        if (this.user != "") {
          let postData = qs.stringify({
            message: this.sendmessb,
          })

          let id = this.listb[index].resource.id

          axios.post(`/api/resource/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
             
              console.log(response.data)
              let postData = qs.stringify({
                page: 1,
              })

                let id = this.listb[index].resource.id
              

              axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

                if (response.status === 200) {
                  this.listcom = response.data
                  this.sendmessb = ""
                  this.listb[index].resource.comments ++
                  console.log(this.listb)
                } 
              })
            } 
          })
          this.$message({
            type: 'success',
            message: "发表成功！"
          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "请先登录！"
          })
        }
      },

      Last () {
        if(this.Page > 1) {
          this.Length -= this.listv.length
          this.Page --
          let id = this.$route.params.id
          let postData = qs.stringify({
            type: 0,
            page: this.Page,
          })

          axios.post(`/api/userResource/${id}`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              this.listv = response.data
              console.log(this.listv)
              for (var i = 0; i < this.listv.length; i++) {
                this.statuev.push(this.listv[i].statue)
                this.favoritev.push(this.listv[i].favorite)
                this.showv.push(false)
              }
              console.log(this.statuev)
              console.log(this.favoritev)
              console.log(this.showv)
            } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是第一页了！"
          })
        }

      },

      Next () {
        if (this.listv.length == 10) {
          this.Page ++
          let id = this.$route.params.id
          let postData = qs.stringify({
            type: 0,
            page: this.Page,
          })

          axios.post(`/api/userResource/${id}`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                this.listv = response.data
                console.log(this.listv)
                this.Length += this.listv.length
                for (var i = 0; i < this.listv.length; i++) {
                  this.statuev.push(this.listv[i].statue)
                  this.favoritev.push(this.listv[i].favorite)
                  this.showv.push(false)
                }
                console.log(this.statuev)
                console.log(this.favoritev)
                console.log(this.showv)
              } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是最后一页了！"
          })
        }
      },

      last () {
        if(this.page > 1) {
          this.length -= this.listb.length
          this.page --
          let id = this.$route.params.id
          let postData = qs.stringify({
            type: 1,
            page: this.page,
          })

          axios.post(`/api/userResource/${id}`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              this.listb = response.data
              console.log(this.listv)
              for (var i = 0; i < this.listb.length; i++) {
                this.statueb.push(this.listb[i].statue)
                this.favoriteb.push(this.listb[i].favorite)
                this.showb.push(false)
              }
              console.log(this.statueb)
              console.log(this.favoriteb)
              console.log(this.showb)
            } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是第一页了！"
          })
        }

      },

      next () {
        if (this.listb.length == 10) {
          this.page ++
          let id = this.$route.params.id
          let postData = qs.stringify({
            type: 1,
            page: this.page,
          })

          axios.post(`/api/userResource/${id}`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                this.listb = response.data
                console.log(this.listb)
                this.length += this.listb.length
                for (var i = 0; i < this.listb.length; i++) {
                  this.statueb.push(this.listb[i].statue)
                  this.favoriteb.push(this.listb[i].favorite)
                  this.showb.push(false)
                }
                console.log(this.statueb)
                console.log(this.favoriteb)
                console.log(this.showb)
              } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是最后一页了！"
          })
        }
      },

    },

    created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== "") {
            this.user = response.data
          }
        } 

      })

      let id = this.$route.params.id

      axios.post(`/api/user/otherInfo/${id}`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          this.time = this.list.user.createtime.slice(0,10)
          console.log(this.list)
          // console.log(this.list.attention)

          if (this.user.id == this.list.user.id) {
            this.self = false
          }

          if (this.list.attention == 1) {
            this.fou = false
            this.delfou = true
          } else {
            this.fou = true
            this.delfou = false
          }
         
        } 

      }) 

      let postData = qs.stringify({
        id: this.$route.params.id,
      })

      axios.post(`/api/classBlogs`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.blogs = response.data
          console.log(this.blogs)
          // console.log(this.blogs.length)
          
          for (var i in this.blogs) {
            // console.log(this.blogs[i])
            for (var j in this.blogs[i]) {
              this.allblog.push(this.blogs[i][j])
              this.statue.push(this.blogs[i][j].statue)
              this.favorite.push(this.blogs[i][j].favorite)
              // console.log(this.allblog)
            }
            
          }
        } 

      })

      let postDatav = qs.stringify({
        type: 0,
        page: 1,
      })

      axios.post(`/api/userResource/${id}`, postDatav, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listv = response.data
            console.log(this.listv)
            this.Length = this.listv.length
            for (var i = 0; i < this.listv.length; i++) {
              this.statuev.push(this.listv[i].statue)
              this.favoritev.push(this.listv[i].favorite)
              this.showv.push(false)
            }
            console.log(this.statuev)
            console.log(this.favoritev)
            console.log(this.showv)
          } 

      }) 

      let postDatab = qs.stringify({
        type: 1,
        page: 1,
      })

      axios.post(`/api/userResource/${id}`, postDatab, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listb = response.data
            console.log(this.listb)
            this.length = this.listb.length
            for (var i = 0; i < this.listb.length; i++) {
              this.statueb.push(this.listb[i].statue)
              this.favoriteb.push(this.listb[i].favorite)
              this.showb.push(false)
            }
            console.log(this.statueb)
            console.log(this.favoriteb)
            console.log(this.showb)
          } 

      })

    },

    destroyed () {
      // sendmess接收数据
      EventBus.$emit('send',this.list.user);
      
    }
}
</script>

<style lang="stylus" scoped>
.userdetails
  width 82%
  margin-left 13.2%
  margin-top 5rem
  position relative
  // background-color skyblue
  .slide
    height auto
    .usermess
      width 18%
      height 13rem
      margin-top -.7rem
      position fixed
      border 1px #ccc solid
      border-radius 10px
      box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
      background-color #fff
      .user
        width 100%
        height 5rem
        border-bottom  .05rem #ccc dotted
        // background-color red
        img 
          height 4rem
          width 22%
          border-radius 50%
          margin-left 1rem
          margin-top -1.5rem
        span 
          display inline-block
          margin-left 1rem
          margin-top 1rem
          a
            color #26a2ff
            font-size .9rem
      .mess
        width 100%
        height auto
        margin-top 1rem
        span
          width 18%
          font-size .9rem
          text-align center
          display inline-block
          // background-color red
          .name
            color #aaa
      .button
        width 100%
        margin-top 1rem
        // background-color red
        span 
          padding .5rem 1rem
          border .05rem #eee solid
          border-radius .3rem
          margin-left 16%
          box-shadow: 0 0 0.066667rem rgba(131, 171, 175, 0.5);
          a
            color #26a2ff
        .fou
          background-color skyblue
          a
            color #fff
        span:hover 
          background-color skyblue
          a
            color #fff
    .sortmain
      width 18%
      min-height 28rem
      margin-bottom 2rem
      background-color #fff
      position fixed
      top 17rem
      margin-top 1rem
      border .05rem #eee solid
      ul
        height 100%
        width 100%
        li
          width 93.8%
          line-height 3rem
          padding-left 1rem
          position relative
          // background-color red
          a
            font-size .8rem
          span 
            right 10%
            position absolute
            color #aaa
        li:hover
          background-color #f5f6f7
          a
            color #26a2ff
        .active
          background-color #f5f6f7
          color #26a2ff
        .sorttitle
          width 93.8%
          line-height 2rem
          font-size .9rem
          padding-left 1rem
          background-color #ccc
        .sorttitle:hover
          background-color #ccc
  .main
    width 77%
    min-height 44rem
    position relative
    left 23%
    margin-bottom 2rem
    background-color #fff
    .sort
      width 63%
      height 4rem
      position fixed
      z-index 10
      top 4rem
      border-bottom .05rem #ccc solid
      background-color #fff
      span
        width 4%
        line-height 1.5rem
        text-align center
        display inline-block
        margin-top 1.5rem
        margin-left 3rem
        // background-color red
      .block1
        width 4%
        height .2rem
        position absolute
        margin-top .8rem
        border-radius 20%
        margin-left 3rem
        display inline-block
        background-color skyblue
      .block2
        width 4%
        height .2rem
        position absolute
        margin-top .8rem
        border-radius 20%
        margin-left 9.6rem
        display inline-block
        background-color skyblue
      .block3
        width 4%
        height .2rem
        position absolute
        margin-top .8rem
        border-radius 20%
        margin-left 16rem
        display inline-block
        background-color skyblue
    .single
      height auto
      // background-color red
      .empty
        text-align center
        font-size 1rem
        margin-top 6.5rem
        // background-color red
      ul
        height auto
        padding-top 3rem
        padding-left 1rem
        padding-bottom 1rem
        // background-color red
        .page 
          width 100%
          line-height 1rem
          margin-top 1rem
          // background-color red
          span
            margin-left 23%
            text-align center
            font-size 1.2rem
            // background-color #fff
            a
              font-size 2rem
            i
              color #26a2ff
        .show1
          width 95%
          margin-top 1rem
          padding .5rem
          padding-left 1rem
          position relative
          border .05rem #eee solid
          box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
          // background-color red
          .content
            width 90%
            height 100%
            display inline-block
            // background-color skyblue
            p
              width 99%
              line-height 2rem
              font-size 1rem
              // background-color red
              .a
                color #26a2ff
              .del
                left 97%
                top .1rem
                font-size 1.3rem
                position absolute
                // background-color red
            div
              width 100%
              font-size .8rem
              height 2rem
              display: -webkit-box; 
              word-break: break-all;
              -webkit-box-orient: vertical;
              -webkit-line-clamp:2;
              overflow: hidden;
              text-overflow:ellipsis;
              // background-color red
            .icon
              width 100%
              height 1.5rem
              // background-color skyblue
              span 
                width 15%
                display inline-block
                font-size 1rem
                // background-color red
                i 
                  font-size .8rem
        .show3
          width 96%
          margin-left 2%
          height auto
          margin-top 1rem
          position relative
          border .05rem #eee solid
          border-radius 10px
          box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
          background-color #fff
          .photo
            width 6%
            height 4rem
            left 6%
            position absolute
            background-color #fff
            top 1rem
            img 
              width 120%
              margin-left 0%
          .message
            width 70%
            height auto
            margin-left 15%
            padding-top .8rem
            padding-bottom .5rem
            // background-color red
            p
              line-height 1.5rem
              position relative
              font-size .8rem
              // background-color red
          .icon
            width 100%
            height 1.5rem
            // background-color skyblue
            span 
              width 10%
              display inline-block
              font-size 1rem
              // background-color red
              margin-left 6%
              i 
                font-size .8rem
          .comment
            width 100%
            height auto
            margin-top 1rem
            position relative
            border-top .1rem #ccc solid
            // background-color red
            ul
              height auto
              margin-top -2.5rem
              li
                width 100%
                font-size .8rem
                margin-bottom .5rem
                // background-color red
                p
                  width 100%
                  text-indent 2.5rem
                  // background-color red
                  img
                    height 1.5rem
                    width 2.5%
                    margin-left 0%
                    border-radius 50%
                  i
                    font-size .7rem
                    color #ccc
                input 
                  width 80%
                  margin-left 2.5rem
                  // margin-top 1rem
                  position absolute
                  bottom 0rem
                  text-indent 1.5rem
                  font-size .8rem
                  border .05rem #ccc solid
                span
                  padding 0rem 1rem
                  position absolute
                  bottom 0rem
                  left 90%                  
                  border .05rem #ccc solid
                  background-color #fff
                  a
                    color #26a2ff
                span:hover
                  background-color skyblue
                  a
                    color #fff
</style>